<%@ page contentType="text/html;charset=UTF-8" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="layout" content="main" />
        <gui:resources components="['draggableList']"/>
        <title>个人工具列表</title>
        <style>
            div.workarea {
                padding: 10px;
                float: left
            }

            ul.draglist {
                position: relative;
                width: 200px;
                list-style: none;
                margin: 0;
                padding: 0;
                /*
                The bottom padding provides the cushion that makes the empty
                list targetable.  Alternatively, we could leave the padding
                off by default, adding it when we detect that the list is empty.
                */
                padding-bottom: 20px;
            }

            ul.draglist li {
                margin: 1px;
                cursor: move;
            }

            li.list1 {
                background-color: #D1E6EC;
                border: 1px solid #7EA6B2;
            }

            li.list2 {
                background-color: #D8D4E2;
                border: 1px solid #6B4C86;
            }

            li.list3 {
                background-color: #27D6E3;
                border: 1px solid #95C8CC;
            }

            li.list4 {
                background-color: #779457;
                border: 1px solid #413170;
                color: #FFF;
            }

        </style>
    </head>

    <body>
        <div class="body">
            <h1>个人工具列表</h1>


            <gui:draggableListWorkArea formReady="true">

                <gui:draggableList id="myList1" class="list1" prepend="list_">
                    <li id="a1"><g:link controller="weather" action="report">天气预报</g:link></li>
                    <li id="a2"><g:link controller="tools" action="calendarShow">万年历</g:link></li>
                    <li id="a3"><g:link controller="note" action="list">记事本</g:link></li>
                    <li id="a4"><g:link controller="stock" action="stockInformation">股票信息查询</g:link></li>
                </gui:draggableList>

                <gui:draggableList id="myList2" class="list2">
                    <li id="b1"><g:link controller="tools" action="translate">在线翻译</g:link></li>
                    <li id="b2"><g:link controller="tools" action="songs">在线听歌</g:link></li>
                    <li id="b3"><g:link controller="gmap" action="index">电子地图</g:link></li>
                    <li>B:4</li>
                </gui:draggableList>

            </gui:draggableListWorkArea>
            <br clear="left"/>
            <br/>
        </div>

    </body>

</html>